<template>
  <div>
    <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="50" v-if="showNumber" />
      <el-table-column v-for="col in columns" :key="col.prop" :prop="col.prop" :label="col.label" align="center"
        :width="col.width">
        <template #default="{ row, $index }">
          <slot :scope="row" :index="$index" :name="col.prop">
            <div class="rowItem" @click="handleClick(row, col.prop)">
              <!-- 仅查看 -->
              <el-tooltip :disabled="col.edit">
                <div slot="content" v-html="row[col.prop]"></div>
                <div v-if="!col.edit && !col.writeEdit" class="header-tooltip" v-html="row[col.prop]"></div>
                <!-- 新增整改项编辑 -->
                <el-input v-else-if="col.writeEdit" v-model="row[col.prop]" placeholder="请输入内容"
                  class="pms-wz-input el-table-inline" :maxlength="150" :disabled="noZgEdit"></el-input>
                <!-- 单选框 -->
                <div v-else style="display: flex;flex-direction: column;text-align: left;">
                  <el-radio-group v-model="row[col.prop]" aria-hidden="true">
                    <el-radio :disabled="forbiddenEdit(row, col.prop, item.value)" :label="item.value"
                      v-for="item in checkTypeObj[col.prop]" :key="item.value" aria-hidden="true">{{
                        item.label
                      }}</el-radio>
                  </el-radio-group>
                </div>
              </el-tooltip>
            </div>
          </slot>
        </template>
      </el-table-column>
      <slot name="controlsBtn" />
    </el-table>
  </div>
</template>

<script>
import { commonDiabledProp } from '../option'
import {
  MAIN_FILE_FIRST_FORM_FILENAME_F,
  MAIN_FILE_FIRST_FORM_FILENAME_H,
  MAIN_FILE_FIRST_FORM_FILENAME_I,
  MAIN_FILE_FIRST_FORM_FILENAME_G,
  MAIN_FILE_FOURTH_FORM_FILENAME_F,
  MAIN_FILE_FOURTH_FORM_FILENAME_G,
  MAIN_FILE_RECTIFY_FINISHED
} from '../enumConfig'
export default {
  name: "ReceuptTable",
  props: {
    checkTypeObj: {
      type: Object,
      default: () => ({})
    },
    columns: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => []
    },
    mergeFields: {
      type: Array,
      default: () => []
    },
    showNumber: {
      type: Boolean,
      default: false
    },
    onlyCheckShow: {
      type: Boolean,
      default: true
    },
    forbiddenShow: {
      type: String,
      default: ''
    },
    currentNode: {
      type: String,
      default: ''
    },
    specalTag: {
      type: String,
      default: ''
    },
    noOpertaion: {
      type: Boolean,
      default: false
    },
    rectifyShow: {
      type: Boolean,
      default: false
    },
    noZgEdit:{
        type: Boolean,
        default: false
    }
  },
  data() {
    return {
      commonDiabledProp,
    }
  },
  watch: {
    tableData: {
      handler(newVal) {
        this.mergeRules = this.generateMergeRules(this.tableData, this.mergeFields);
      },
      deep: true,
      immediate: true,
    }
  },
  methods: {
    handleClick(row, prop) {
      this.$emit('handleChangeClick', row, prop)
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      return this.mergeRules[rowIndex]?.[columnIndex] || [1, 1];
    },
    generateMergeRules(data, mergeFields) {
      const rules = [];
      // 倒序遍历避免合并塌陷
      for (let row = data.length - 1; row >= 0; row--) {
        rules[row] = [];
        mergeFields.forEach((field, col) => {
          // 空值不合并
          if (!data[row][field]) {
            rules[row][col] = [1, 1];
            return;
          }

          // 检查父级字段一致性（如：同一部门下的角色才合并）
          const parentFields = mergeFields.slice(0, col);
          const isParentMatch = parentFields.every(pField =>
            data[row][pField] === data[row + 1]?.[pField]
          );

          // 动态判断合并条件
          if (row < data.length - 1 && isParentMatch && data[row][field] === data[row + 1][field]) {
            rules[row][col] = [rules[row + 1][col][0] + 1, 1];
            rules[row + 1][col] = [0, 0]; // 标记被合并的单元格
          } else {
            rules[row][col] = [1, 1];
          }
        });
      }
      return rules;
    },
    refineA(type1, type2, type3, type4, type5) {
      let res1 = type1 && type2
      return res1 && type3 && type4 && type5;
    },
    refineB(prop) {
      if (this.forbiddenShow === '01' && ([MAIN_FILE_FIRST_FORM_FILENAME_F, MAIN_FILE_FIRST_FORM_FILENAME_G, MAIN_FILE_FIRST_FORM_FILENAME_H].includes(prop))) {
        return true
      }
      if (this.forbiddenShow === '04' && ([MAIN_FILE_FOURTH_FORM_FILENAME_F, MAIN_FILE_FOURTH_FORM_FILENAME_G].includes(prop))) {
        return true
      }
    },
    refineC(prop) {
      return !([MAIN_FILE_RECTIFY_FINISHED].includes(prop) && this.rectifyShow)
    },
    // 禁止编辑显示
    forbiddenEdit(row, prop, item) {
      if (!this.noOpertaion) {
        return this.refineC(prop)
      }
      if (this.specalTag === '05') {
        return this.refineB(prop)
      }
      if (!this.onlyCheckShow) {
        return true
      }
      const show = commonDiabledProp[this.currentNode][this.forbiddenShow]?.includes(prop)
      if (show) {
        return true
      }
      if (this.refineA(this.currentNode === 'F1', this.forbiddenShow === '01', ['0', '2']?.includes(item), +row[MAIN_FILE_FIRST_FORM_FILENAME_F] === 1, (![MAIN_FILE_FIRST_FORM_FILENAME_I].includes(prop)))) {
        return true
      }
      if (this.refineA(this.currentNode === 'F12', this.forbiddenShow === '01', ['0', '2']?.includes(item), +row[MAIN_FILE_FIRST_FORM_FILENAME_F] === 1, (![MAIN_FILE_FIRST_FORM_FILENAME_I].includes(prop)))) {
        return true
      }
    }
  }
}
</script>
<style scoped lang='scss'>
.el-table td.el-table__cell div {
  margin: 4px 0;
}

input[aria-hidden="true"] {
  display: none !important;
}



.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
  box-shadow: none;
}



.header-tooltip {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

::v-deep .el-radio {
  margin-bottom: 10px;
  /* 竖向间距 */
  display: block;
  /* 确保块级元素独占一行 */
}
</style>

<!-- <template slot-scope="scope">
        </template> -->
<!-- <el-table-column show-overflow-tooltip v-for="item in col.children" :key="item.prop" :prop="item.prop"
          :label="item.label" align="center" :width="item.width" /> -->